<template>

  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>课程负责人</el-breadcrumb-item>
      <el-breadcrumb-item>课程信息管理</el-breadcrumb-item>

    </el-breadcrumb>
    <div class="searchForm">

      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="queryInfo.query" width = "250" placeholder="输入课程代码或课程名" clearable @clear="getCourseList"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="" @click="getCourseList" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-button style="position: absolute; right: 720px" type="" @click="addDialogVisible=true">添加课程</el-button>
      </el-form>



      <el-dialog title="添加课程" :visible.sync="addDialogVisible" width="40%" @close="addDialogClose">
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">

          <el-form-item label="课程编号" prop="courseid">
            <el-input v-model="addForm.courseid"></el-input>
          </el-form-item>

          <el-form-item label="课程名" prop="cname">
            <el-input v-model="addForm.cname" ></el-input>
          </el-form-item>

          <el-form-item label="对应专业" prop="major">
            <el-input type="textarea" v-model="addForm.major"  maxlength="100" show-word-limit></el-input>
          </el-form-item>

          <el-form-item label="所属负责人" prop="username" >  {{this.$session.get('bull')}}
            <el-input v-model="addForm.username" v-show="false" readonly="readonly"></el-input>
          </el-form-item>

          <el-form-item label="课程性质" prop="attribute">
            <el-select v-model="addForm.attribute" placeholder="请选择">
              <el-option label="普通共同课" value="普通共同课"></el-option>
              <el-option label="学科共同课" value="学科共同课"></el-option>
              <el-option label="专业必修课" value="专业必修课"></el-option>
              <el-option label="专业选修课" value="专业选修课"></el-option>
              <el-option label="实践教学课" value="实践教学课"></el-option>
            </el-select>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCourseBase">确 认</el-button>
        </div>
      </el-dialog>



      <el-table :header-cell-style="{background:'#808080',color:'#FFFFFF'}" border stripe :data="List" style="width: 100%">
        <el-table-column type="index"  width="80" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="courseid" label="课程编号" width="160" align="center">
        </el-table-column>
        <el-table-column prop="cname" label="课程名" width="180" align="center">
        </el-table-column>
        <el-table-column prop="major" label="专业" align="center">
        </el-table-column>
        <el-table-column prop="attribute" label="课程性质" align="center">
        </el-table-column>

        <el-table-column prop="state" label="详情" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="课程详情" placement="top-start">
              <el-button  icon="el-icon-tickets" circle @click="showCourse(scope.row.courseid,scope.row.cname)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="修改  /  删除" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑课程" placement="top-start">
              <el-button  icon="el-icon-edit" circle @click="editCourse(scope.row.courseid)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除课程" placement="top-start">
              <el-button type="" icon="el-icon-delete" circle @click="deleteCourse(scope.row.courseid)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>


        <el-table-column prop="state" label="发布状态" align="center">
          <template slot-scope="scope">
            <el-switch
              property="state"
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#C0C0C0"
              :active-value="1"
              :inactive-value="0"
              @change="changeSwitch( scope.row.state,scope.row.courseid,scope.row.cname)">
            </el-switch>
          </template>
        </el-table-column>



      </el-table>
      <el-dialog title="修改课程信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClose" append-to-body>
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">

          <el-form-item label="对应专业" prop="major">
            <el-input v-model="editForm.major" autocomplete="off"></el-input>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editCourseInfo">修 改</el-button>
        </div>
      </el-dialog>


    </div>

    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[4]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </el-card>

</template>


<script>
  export default {

    created(){
      this.getCourseList();
    },
    data() {
      return {
        queryInfo:{
          query:'',//查询信息
          role:this.$session.get('bull'),
          pageNum:1,
          pageSize:4
        },
        List:[],
        total:0,
        addDialogVisible:false,
        editDialogVisible:false,
        infoDialogVisible:false,

        addForm:{
          cname:'',
          username:this.$session.get('bull'),
          courseid:'',
          major:'',
          attribute:''
        },
        editForm:{
          password:'',
          memorandum:''
        },
        infoForm:{
          courseid:'',
          ord:'',
          coursedata:'',
          coursetime:'',
          goal:'',
          secondindicid:'',
        },
        addFormRules: {
          cname: [
            { required: true, message: '请输入正确课程名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],

          points:[
            { required: true, message:'请选择学分', trigger: 'blur' }
          ],
          period:[
            { required: true, message:'请输入学时', trigger: 'blur' },
            { type: 'number', message: '学时必须为数字值'}
          ],
          attribute:[
            { required: true, message:'请输入课程性质', trigger: 'blur' }
          ],
          theory:[
            { required: true, message:'请输入理论学时', trigger: 'blur' },
            { type: 'number', message: '学时必须为数字值'}
          ],
          practice:[
            { required: true, message:'请输入实验学时', trigger: 'blur' },
            { type: 'number', message: '学时必须为数字值'}
          ],
          major:[
            { required: true, message:'请输入专业', trigger: 'blur' }
          ],
          courseid:[
              { required: true, message:'请输入课程编号', trigger: 'blur'},
              { min: 6, max: 6, message: '长度为6位字符串', trigger: 'blur' }
          ],
        },

        editFormRules: {
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ]
        },
        infoFormRules: {

        },
      }
    },


    methods: {
      async getCourseList () {
        const { data: res } = await this.$http.get("Courses/AllCourse", { params: this.queryInfo })
        this.List = res.data;
        this.total = res.numbers;
      },
      showCourse (courseid,cname) {
        this.$session.set("bulls",courseid);
        this.$session.set("coursename",cname);
        this.$router.push({path:'/FundamentalInfo'});
      },
      async makeCourse(courseid){
        const { data: res } = await this.$http.put("Courses/CourseState?state=1&courseid="+courseid+'');
        console.log(res);
        if (res !== "success") return this.$message.error("发布失败");
        this.$message.success("发布成功");
        this.getCourseList();
      },

      editCourseInfo () {
        this.$refs.editFormRef.validate(async valid => {
          console.log(valid);
          if (!valid) return;

          const { data: res } = await this.$http.put("Courses/Course", this.editForm);
          console.log(res);
          if (res !== "success") return this.$message.error("修改失败");
          this.$message.success("修改成功");

          this.editDialogVisible = false;
          this.getCourseList();
        });
      },
      async editCourse(courseid){
        const {data:res} = await this.$http.get("Courses/CourseMessage?courseid="+courseid);
        this.editForm = res;
        this.editDialogVisible = true;
      },
      async deleteCourse (courseid) {

        const confirmResult = await this.$confirm('是否删除该课程？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (confirmResult !== 'confirm') {
          return ;
        }
        const { data: res } = await this.$http.delete("Courses/Course?courseid=" + courseid);
        if (res !== "success") {
          return this.$message.error("删除失败");
        }
        this.$message.success("删除成功");
        this.getCourseList();
      },
      addCourseBase () {
        this.$refs.addFormRef.validate(async valid => {
          if (!valid) return;
          const { data: res } = await this.$http.post("Courses/Course", this.addForm);
          if (res !== "success") {
            return this.$message.error("该课程编号已被使用!")
          }
          this.$message.success("添加成功！")
          this.$session.set("bulls",this.addForm.courseid);
          this.$session.set("coursename",this.addForm.cname);
          this.addDialogVisible = false;
          this.getCourseList();

          const confirmResult = await this.$confirm('是否立刻完善该课程基础信息？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '稍后',
            type: 'warning'
          }).catch(err => err)
          if (confirmResult !== 'confirm') {
            return ;
          }
          this.$router.push({path:'/Fundamentalinfo'});
        })
      },
      async changeSwitch (state,courseid,cname) {
        const { data: res } = await this.$http.put("Courses/CourseState?state=" + state + "&courseid="+courseid);
        if (res !== "success") return this.$message.error("操作失败!");
        else{
          if(state == 1){
            this.$message.success("课程" + cname +"发布成功!");
            this.List[index].state = 1;
          }
          else
            this.$message.warning("课程" + cname +"已经取消发布!");
        }
        this.getCourseList();
      },
      handleSizeChange (newSize) {
        this.queryInfo.pageSize = newSize;
        this.getCourseList();
      },
      handleCurrentChange (newPage) {
        this.queryInfo.pageNum = newPage;
        this.getCourseList();
      },
      addDialogClose () {
        this.$refs.addFormRef.resetFields();
      },
      editDialogClose () {
        this.$refs.editFormRef.resetFields();
      },
    }
  }
</script>




<style scoped>
  .searchForm{
    margin-top: 40px;
  }
</style>
